import React, { useRef, useState } from "react";
import { SearchForm, Table as MyTable, GroupBtn } from "@modules";
import { Input, Select, Form, DatePicker, Table } from "antd";
import moment from "moment";
import { formItemLayout, genPath } from "@contants/app";
import utils from '@utils'

const { RangePicker } = DatePicker;
export default (props) => {
  const formEl = new useRef();
  const initialValues = {
    startDt: "",
    endDt: "",
    account: "",
    anchor: "",
    liveDt: [],
  };
  const [params, setParams] = useState(initialValues);
  const columns = [
    {
      title: "id",
      key: "id",
      width: 40,
      render: (text, red, index) => {
        return <div>{index + 1}</div>;
      },
    },
    {
      title: "主播",
      key: "anchor",
      width: 30,
    },
    {
      title: "账号",
      key: "account",
      width: 30,
    },
    {
      title: "场次",
      key: "timeName",
      width: 30,
    },
    {
      title: "开始日期",
      key: "startLiveTime",
      width: 50,
    },
    {
      title: "结束日期",
      key: "endLiveTime",
      width: 50,
    },
    {
      title: "操作",
      key: "id",
      width: 200,
      fixed: "right",
      render: (text, rec, index) => {
        let btns = [
          {
            text: "删除",
            onClick: () => {
              delRecord(rec);
            },
          },
        ];
        return <GroupBtn btns={btns} />;
      },
    },
  ];
  const buildParams = (res) => {
    let { liveDt, ...data } = res;
    data.startDt = liveDt[0]
      ? moment(liveDt[0]).format("YYYY-MM-DD 00:00:00")
      : "";
    data.endDt = liveDt[1]
      ? moment(liveDt[1]).format("YYYY-MM-DD 23:59:59")
      : "";
    return data;
  };
  // 查询列表
  const onSearch = (params = {}) => {
    formEl.current.onSubmit().then((res) => {
      let data = buildParams(res);
      setParams({ ...data });
    });
  };
  const onRefreshList = (res) => {
    setParams(res);
  };
  // 清空查询参数
  const onReset = () => {
    formEl.current.onReset().then((_) => {
      onRefreshList({
        ...initialValues,
      });
    });
  };

  const delRecord = (rec) => {
    utils.confirm({
      content:  `是否删除该条记录:${rec.anchor}-${rec.account}-${rec.timeName}-${rec.startLiveTime}`,

     
      onOk: () => {
        utils.post(genPath("/api/live-time-info/del"), {
            id: rec.id,
          })
          .then((res) => {
            onSearch();
          });
      },
    });
  };

  return (
    <div>
      <SearchForm
        ref={formEl}
        initialValues={initialValues}
        groupBtns={[
          { text: "查询", icon: "SearchOutlined", onClick: onSearch },
          { text: "清空", icon: "RedoOutlined", onClick: onReset },
        ]}
      >
        <Form.Item name="anchor" label="主播">
          <Input placeholder="请输入主播" />
        </Form.Item>
        <Form.Item name="account" label="账号">
          <Input placeholder="请输入账号" />
        </Form.Item>
        <Form.Item name="liveDt" label="直播日期">
          <RangePicker />
        </Form.Item>
      </SearchForm>
      <MyTable
        rowKey={"md5"}
        url={genPath("/api/live-time-info/list")}
        params={params}
        columns={columns}
      ></MyTable>
    </div>
  );
};
